<template>
  <div class="app-container">
    <!--头部-->
    <table-search @onSearch="getSystemLogs" @onReset="handleReset">
      <template slot="search">
        <date-group @success="handleDate" />
      </template>
    </table-search>
    <!--内容-->
    <table-page
      :data="list"
      :loading="loadingTableVisible"
      :where="listQuery"
      :total="total"
      @pagination="getSystemLogs"
    >
      <template slot="column">
        <el-table-column label="编号" prop="id" align="center" width="80" />
        <el-table-column label="操作人" prop="adminId" align="center" width="100" />
        <el-table-column label="来源" prop="source" align="center" width="120" />
        <el-table-column label="系统类型" prop="type" align="center" width="80" />
        <el-table-column label="信息" prop="message" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <a
              class="list-a"
              href="javascript:void(0)"
              @click="handleLogInfo(row)"
            >{{ row.message }}</a>
          </template>
        </el-table-column>
        <el-table-column label="浏览器信息" prop="browserInfo" :show-overflow-tooltip="true" />
        <el-table-column label="登陆IP地址" prop="creationIpAddress" align="center" width="150">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.clientAddress"
              placement="right-start"
            >
              <span>{{ scope.row.creationIpAddress }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="执行时间" prop="creationTime" align="center" width="150">
          <template slot-scope="scope">
            <div v-html="$htmlFunction.parseTime(scope.row.creationTime)" />
          </template>
        </el-table-column>
      </template>
    </table-page>
    <!--详情-->
    <el-dialog :visible.sync="dialogLogVisible" title="日志详情">
      <json-viewer :value="temp" />
    </el-dialog>
  </div>
</template>

<script>
import TableSearch from '@/components/TableSearch' // table搜索
import TablePage from '@/components/TablePage' // table 分页
import DateGroup from '@/components/DateGroup' // date 时间组
import JsonViewer from 'vue-json-viewer' // json格式化展示
export default {
  name: 'AdminLog',
  components: { TableSearch, TablePage, JsonViewer, DateGroup },
  data() {
    const listDefault = {
      page: 1,
      limit: 20,
      startTime: undefined,
      endTime: undefined
    }
    return {
      listQuery: listDefault,
      list: [],
      total: 0,
      loadingTableVisible: true,
      dialogLogVisible: false,
      temp: []
    }
  },
  created() {
    this.getSystemLogs()
  },
  methods: {
    getSystemLogs() {
      this.loadingTableVisible = true
      this.$post('/log/system/list', this.listQuery)
        .then(response => {
          this.list = response.data.items
          this.total = response.data.total
          this.loadingTableVisible = false
        })
        .catch(() => {
          this.loadingTableVisible = false
        })
    },
    handleReset() {
      this.listQuery = this.listDefault
    },
    // 明细事件
    handleLogInfo(row) {
      const loading = this.$loading({ text: '正在加载数据...' })
      this.$get('/log/system/' + row.id)
        .then(response => {
          loading.close()
          this.dialogLogVisible = true
          this.temp = response.data
          this.temp.customData = JSON.parse(response.data.customData)
        })
        .catch(err => {
          loading.close()
          console.error(err)
        })
    },
    handleDate(startTime, endTime) {
      this.listQuery.startTime = startTime
      this.listQuery.endTime = endTime
    }
  }
}
</script>

